<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../include/base.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>欢迎使用CRM管理系统</title>
    <link rel="stylesheet" href="${basePath }/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="${basePath }/css/style.css" type="text/css" />
    <link rel="stylesheet" href="${basePath }/css/colorPicker.css" type="text/css" />
    <script type="text/javascript" src="${basePath }/js/jquery.min.js"></script>
    <script type="text/javascript" src="${basePath }/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${basePath }/js/jquery.colorPicker.min.js"></script>
</head>
<body>
	<div class="navbar">
        <div class="navbar-inner">
            <div class="container">
               <a href="${basePath }/message" class="brand">凯盛CRM管理系统</a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li><a href="${basePath }/message">最新动态</a></li>
						<li><a href="${basePath }/contacts/list">联系人</a></li>
						<li><a href="${basePath }/task/list">日程安排</a></li>
						<li  class="active"><a href="${basePath }/deal/list">业务机会</a></li>
                    </ul>
                    <ul class="nav pull-right">
                        <li><a href="#">${user.username }</a>
                        <li class="divider-vertical"></li>
                        <li><a href="${basePath }/user/info">账号设置</a></li>
                        <li><a href="${basePath }/user/loginout">退出</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div  class="container">
        <div class="span9">
            <ul class="breadcrumb" style="vertical-align:top">
                <li class="active">新增业务机会</li>
            </ul>
            <div class="well">
                <form id="myform" class="form-horizontal" action="${basePath }/deal/deal-save" method="post">
                    <fieldset>
                        <div class="control-group" id="titleDiv">
                            <label class="control-label" for="name">标题</label>
                            <div class="controls">
                                <input type="text" id="title" class="input-xlarge"  name="deal.title">
                            </div>
                        </div>
                        
						<div class="control-group" >
                            <label class="control-label" for="company">联系人</label>
                            <div class="controls">                               
								<select name="contactsId" style="width:280px;">
									<option>--选择联系人--</option>
									<c:forEach var="contacts" items="${contactsList}">
										<option value="${contacts.id }">${contacts.name }</option>
									</c:forEach>
								</select>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="company">负责人</label>
                            <div class="controls">                               
								<select name="userId" style="width:280px;">
									<option>--选择负责人--</option>
									<c:forEach var="user" items="${userList}">
										<option value="${user.id }">${user.username }</option>
									</c:forEach>
								</select>
                            </div>
                        </div>
						<div class="control-group">
                            <label class="control-label" for="company">类型</label>
                            <div class="controls">                               
								<select name="dealTypeId" style="width:280px;" id="typeSelect">
									<option>--选择类型--</option>
									<c:forEach var="dealType" items="${dealTypeList}">
										<option value="${dealType.id }">${dealType.type}</option>
									</c:forEach>
									<option id="showModal">新建类型</option>
								</select> 
                            </div>
                        </div>
						 <div class="control-group">
                            <label class="control-label" for="name">价值</label>
                            <div class="controls">
                                <input type="text" class="input-xlarge"  name="deal.money">
                            </div>
                        </div>
                        <div class="control-group" id="contentDiv">
                            <label class="control-label" for="Introduction">内容</label>
                            <div class="controls">
                                <textarea id="content" name="deal.content" class="input-xlarge" rows="6"></textarea>
                            </div>
                        </div>
						  <div class="control-group">
							<label class="control-label">谁可以看到</label>
							<div class="controls">
								<label class="radio">
									<input type="radio" name="view" value="all" />所有人<br/>
								</label>
								<label class="radio">
									<input type="radio" name="view" value="me" />只有我<br/>
								</label>
								<label class="radio">
									<input type="radio" name="view" value="group" data-toggle="collapse" data-target="#group" data-parent="#detail" />选择一个组<br/>
								</label>
								<div id="group" class="collapse">
                                    <select  name="group" style="width:150px">
                                        <option value="">--请选择一个分组--</option>
                                        <c:forEach items="${userGroupList }" var="group">
                                        	<option value="${group.id }">${group.groupName }</option>
                                        </c:forEach>
                                    </select>
                                </div>
                                <label class="radio">
                                	<input type="radio" name="view" value="people" data-toggle="collapse" data-target="#people" data-parent="#detail" />选择一些人<br/>
                                </label>
                                <div id="people" class="collapse">
                                	<c:forEach items="${userList }" var="user">
                                		<input type="checkbox" name="people" value="${user.id }" />${user.username }
                                    </c:forEach>
                                </div>
							</div>
						</div>
                        <div class="form-actions">
                            <button class="btn btn-primary" type="button" id="btn">保存</button>
                            <a href="${basePath }/deal/list" class="btn">返回</a>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
        
        <div class="span3 well" style="padding-top:0px">
            <div class="box">
                <div class="head">抓住机会</div>
                <div style="margin-left:10px;margin-right:10px;margin-bottom:10px;">一个机遇，能扭转一个人的人生走向，机遇在成功中具有举足轻重的作用。有人总结出，人的成功取决于三大要素：天才、勤奋和机遇。其中，机遇更是万万不可缺少的，有的人才华过人，有的人勤奋肯干，可总与成功无缘，我们欠缺的便只是机遇了。而相当多的人能够成功，就是因为机遇来了。 </div>
       		</div>
        </div>
    </div>
    	<div class="modal hide fade" id="myModal">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">×</button>
			<h3>新建业务类型</h3>
		</div>
		<div class="modal-body">

			<form class="form-horizontal" action="#"
				method="post">
				<fieldset>
					<div class="control-group" id="typeDiv">
						<label class="control-label">类型</label>
						<div class="controls">
							<input id="type" type="text" name="type"><br/>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">颜色</label>
						<div class="controls">
							<input id="color" name="color" type="text" style="width:30px;">
						</div>
					</div>
				</fieldset>
			</form>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn" data-dismiss="modal">关闭</a> 
			<a href="#"class="btn btn-primary" id="submit-edit">保存</a>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#title").blur(function(){
				if($(this).val().trim() == "") {
					$("#titleDiv").addClass("error");
				}
			});			
			$("#title").focus(function(){	
				$("#titleDiv").removeClass("error");
			});			
			$("#content").blur(function(){
				if($(this).val().trim() == "") {
					$("#contentDiv").addClass("error");
				}
			});			
			$("#content").focus(function(){	
				$("#contentDiv").removeClass("error");
			});		
			$("#btn").click(function(){
				if($("#title").val().trim() == "") {
					$("#titleDiv").addClass("error");
				} else if($("#content").val().trim() == "") {
					$("#contentDiv").addClass("error");
				} else{
					$("#myform").submit();
				}
			});
				
			$("#color").colorPicker();
			$("#showModal").click(function() {
				$('#myModal').modal('show');
			});	
			$(".colorPicker-picker").change(function() {
				$("#color").val($(this).css(background-color));
				$("#color").colorPicker();
				$("#showModal").click(function() {
					$('#myModal').modal('show');
				});	
			});
			$(".colorPicker-picker").change(function() {
				$("#color").val($(this).css(background-color));
			});
			$("#submit-edit").click(function() {
				var color = $("#color").val();
				var type = $("#type").val();
				if(type.trim() != "") {
					$.post("${basePath}/task-ajax/newDealType",{"color":color,"type":type},function(id){
						$("option").remove("#showModal");
						$("#typeSelect").append("<option selected='selected' value=" + id + ">" + type + "</option>");
						$("#typeSelect").append("<option id='showModeal'>新建类型</option>");
					});
					$('#myModal').modal('hide');
				}else {
					$("#typeDiv").addClass("error");
				}
			});
		});
	</script>	
</body>
</html>